<template>
  <!-- 数据可视化首页 -->
  <div class="app-container theme-bg-index">
    <!-- 头部区域 -->
    <header>
      <div class="center-img">
        <p>企业统计</p>
        <el-date-picker
          v-model="date"
          type="daterange"
          size="small"
          class="statistics-date"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="dateChange"
        />
        <button class="export" @click="exportData">导出</button>
      </div>
    </header>
    <!-- 内容区 -->
    <section>
      <el-table :summary-method="getSummaries" show-summary :data="tableData" :span-method="objectSpanMethod" border class="statistics-list">
        <el-table-column prop="toRegional" align="center" label="所属地域" width="">
          <template slot-scope="{row}">
            <span class="to-link" @click="goProject(row,'1')">{{ formatterReginal(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="enterpriselevel" align="center" label="企业等级">
          <template slot-scope="{row}">
            <span class="to-link" @click="goProject(row,'2')">{{ formatterGrade(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="enterpriseName" align="center" label="企业名称">
          <template slot-scope="{row}">
            <span class="to-link" @click="goProject(row,'3')">{{ row.enterpriseName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="projectLevel" align="center" :formatter="formatterLevel" label="项目等级" />
        <el-table-column prop="proNumber" align="center" label="项目数(个)" />
        <el-table-column prop="projectOutput" :formatter="(row) => projectOutput(row)" align="center" label="项目产值(万元)" />
      </el-table>
    </section>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { enterpriseStatisticsExport, enterpriseStatistics } from '@/api/statisticalAnalysis/statistics/enterprise.js'
import { dataMethod } from '@/utils/tableObjectSpanMethod.js'
export default {
  name: 'Enterprise',
  data() {
    return {
      // 时间搜索
      date: '',
      filter: {
        statisticsStartTime: '',
        statisticsEndTime: ''
      },
      tableData: [],
      spanObj: {},
      regional: [
        { dictValue: '1', dictLabel: '本地企业' },
        { dictValue: '0', dictLabel: '外地企业' }
      ]
    }
  },
  computed: {
    ...mapState({
      proGrade: state => state.basicInfo.proGrade
    }),
    // 地区类型翻译
    formatterReginal() {
      return (row) => this.selectDictLabel(this.regional, row.toRegional)
    },
    // 企业等级翻译
    formatterGrade() {
      return (row) => this.selectDictLabel(this.proGrade, row.enterpriselevel)
    },
    // 项目产值
    projectOutput() {
      return row => this.divideMoney(row.projectOutput, 6, true)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 时间变化
    dateChange(e) {
      if (e) {
        this.filter.statisticsStartTime = e[0]
        this.filter.statisticsEndTime = e[1]
      } else {
        this.filter.statisticsStartTime = ''
        this.filter.statisticsEndTime = ''
      }
      this.getList()
    },
    // 导出
    async exportData() {
      const tableHeader = [
        {
          'key': 'toRegional',
          'label': '所属地域'
        },
        {
          'key': 'enterpriselevel',
          'label': '企业等级'
        },
        {
          'key': 'enterpriseName',
          'label': '企业名称'
        },
        {
          'key': 'projectLevel',
          'label': '项目等级'
        },
        {
          'key': 'proNumber',
          'label': '项目数(个)'
        },
        {
          'key': 'projectOutput',
          'label': '项目产值(万元)'
        }
      ]
      const res = await enterpriseStatisticsExport(tableHeader)
      if (!res) return
      this.downloadFileFlow(res, '企业统计信息')
    },
    // 表格合计
    getSummaries(param) {
      const { data } = param
      const proNumber = data.reduce((prev, item) => (prev + item.proNumber), 0)
      const projectOutput = data.reduce((prev, item) => (prev + item.projectOutput), 0)
      const sums = ['总计', '', '', '', proNumber, this.divideMoney(projectOutput, 6, true)]
      return sums
    },
    // 统计列表
    async getList() {
      const { data } = await enterpriseStatistics(this.filter)
      this.tableData = data
      this.spanObj = dataMethod(this.tableData, ['toRegional', 'enterpriselevel', 'enterpriseName'])
    },
    // 项目等级翻译
    formatterLevel(row) {
      return this.selectDictLabel(this.proGrade, row.projectLevel)
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 列合并
      const _row = this.spanObj[column.property] ? this.spanObj[column.property][rowIndex] : 1
      const _col = _row > 0 ? 1 : 0
      return {
        rowspan: _row,
        colspan: _col
      }
    },
    goProject(row, flag) {
      const { toRegional, enterpriselevel, enterpriseName } = row
      // let query = {}
      // if (flag === '1') {
      //   query = { toRegional }
      // } else if (flag === '2') {
      //   query = { toRegional, enterpriselevel }
      // } else if (flag === '3') {
      //   query =
      // }
      this.$router.push({ name: 'statisticsList-enterprise', params: { toRegional, enterpriselevel, enterpriseName }})
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
